import 'package:flutter/material.dart';
import '../theme/app_theme.dart';

class ModeIntroPage extends StatelessWidget {
  final String title;
  final IconData icon;
  final String description;
  final List<String> features;
  final String buttonText;
  final VoidCallback? onButtonPressed;

  const ModeIntroPage({
    super.key,
    required this.title,
    required this.icon,
    required this.description,
    required this.features,
    required this.buttonText,
    this.onButtonPressed,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Color(0xFFFFE6F0),
              Color(0xFFF8F8F8),
            ],
            stops: [0.0, 1.0],
          ),
        ),
        padding: const EdgeInsets.only(top: 60, bottom: 40, left: 20, right: 20),
        width: double.infinity,
        height: double.infinity,
        child: Column(
          children: [
            
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                IconButton(
                  icon: const Icon(Icons.close, size: 24, color: AppTheme.textSecondary),
                  onPressed: () => Navigator.pop(context),
                  padding: const EdgeInsets.all(10),
                ),
              ],
            ),
            
            
            Container(
              width: 160,
              height: 160,
              margin: const EdgeInsets.only(bottom: 30),
              decoration: const BoxDecoration(
                color: Color(0xFFFFD6E4),
                shape: BoxShape.circle,
              ),
              child: Icon(
                icon,
                size: 80,
                color: AppTheme.primaryColor,
              ),
            ),
            
            
            Text(
              title,
              style: const TextStyle(
                fontSize: 16,
                color: AppTheme.textPrimary,
                height: 1.5,
              ),
              textAlign: TextAlign.center,
            ),
            
            const SizedBox(height: 24),
            
            
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 20),
              padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 20),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(20),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withValues(alpha: 0.05),
                    blurRadius: 10,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: Column(
                children: features.map((feature) => _buildServiceItem(feature)).toList(),
              ),
            ),
            
            const Spacer(),
            
            
            Container(
              margin: const EdgeInsets.only(top: 40, bottom: 20),
              width: MediaQuery.of(context).size.width * 0.9,
              height: 56,
              child: ElevatedButton(
                onPressed: onButtonPressed ?? () => Navigator.pop(context),
                style: ElevatedButton.styleFrom(
                  backgroundColor: AppTheme.primaryColor,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(28),
                  ),
                  elevation: 5,
                  shadowColor: AppTheme.primaryColor.withValues(alpha: 0.3),
                ),
                child: Text(
                  buttonText,
                  style: const TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: AppTheme.white,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildServiceItem(String feature) {
    return Container(
      margin: const EdgeInsets.only(bottom: 20),
      padding: const EdgeInsets.symmetric(horizontal: 40),
      child: Text(
        feature,
        style: const TextStyle(
          fontSize: 16,
          color: AppTheme.textPrimary,
          height: 1.4,
        ),
        textAlign: TextAlign.center,
      ),
    );
  }
}